<!DOCTYPE html>

<html>
<head>
{{template "common/head.html" .}}
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>
    <link rel="stylesheet" href="//g.alicdn.com/de/prismplayer/1.5.7/skins/default/index.css" />
    <script type="text/javascript" src="//g.alicdn.com/de/prismplayer/1.5.7/prism-min.js"></script>
    <style type="text/css">
         #container {
            height: 100%;
            width: 100%;
        }

        #addOverlayGroup {
            margin-right: 1rem;
        }
        #map-div{
            position: absolute;
            top: 60px;
            left: 0px;
            right: 0px;
            bottom: 0px;
        }
        #showProduct{
            position: absolute;
            background: white;
            border-radius: 0px 0px 10px 10px;
            z-index: 9999;
            border: 1px solid gray;
            max-width: 100%;

        }
        #showProduct img{
            width: 100%;
        }
        #showInfo{
            padding: 20px;
        }
        #showInfo > button{
            margin-top: 10px;
            padding: 5px;
            width: 100%;
            border-radius: 5px;
            border: 1px solid darkgray;
        }
        }
        #showInfo > button:active{
            background: red;
            color: white;
        }
    </style>
</head>

<body>
<div id="app">
    <ul class="layui-nav">
        <li class="layui-nav-item" lay-unselect="">
            <a href="javascript:;"><img src="//t.cn/RCzsdCq" class="layui-nav-img">夜猫</a>
        </li>
        {{if .userInfo}}
            <li class="layui-nav-item" lay-unselect="" style="float: right;">
                <a href="javascript:;"><img src="//t.cn/RCzsdCq" class="layui-nav-img">{{.userInfo.Nick}}</a>
                <dl class="layui-nav-child">
                    <dd><a href="/admin">个人中心</a></dd>
                    <dd><a href="/admin/login/logout">退出登录</a></dd>
                </dl>
            </li>
         {{else}}
            <li class="layui-nav-item" lay-unselect="" style="float: right;">
                <a href="/admin/login">登陆</a>
            </li>
        {{end}}
    </ul>
    <div id="map-div">
        <div id="container"></div>
    </div>
    <div style="display: none;" id="showProduct" class="layui-col-xs12 layui-col-sm6 layui-col-sm-offset3 layui-col-md4 layui-col-md-offset4">
        <img v-if="show['type'] == 0" :src="show['url']">
        <div v-if="show['type'] == 1" id="videoDiv"></div>
        <div id="showInfo">
            <h5 v-text="show['title']"></h5>
            <p>拍摄时间：<span v-text="show['shootTime']"></span></p>
            <p>拍摄地址：<span v-text="show['address']"></span></p>
            <button class="btn" @click="closeShow">关闭</button>
        </div>
    </div>
</div>
</body>
<script type="text/javascript"
        src="https://webapi.amap.com/maps?v=1.4.10&key=2d03add203d6e540257f4cfde44f2c7d"></script>
<script>

    var app = new Vue({
        el: '#app',
        data: {
            theme: 'ligth',
            data: [],
            map: null,
            show: [],
        },
        mounted(){
            layui.use('element', function(){
                element = layui.element;
                element.render('nav');
            });
            this.initMap();

        },
        methods: {
            getProduct(){
                axios.post("/index/index/getProduct", {})
                .then(function (response) {
                    if (response.data.code === 1) {
                        console.log(response.data);
                        app.data = response.data.data;
                        app.updateProduct();
                    } else {
                        showMsg(response.data.info)
                    }
                })
            },
            initMap(){
                // 创建地图实例
                this.map = new AMap.Map("container", {
                    zoom: 4,
                    center: [108.780087,35.912404],
                    resizeEnable: true
                });
                this.getProduct();
            },
            updateProduct() {
                this.map.clearMap();
                console.log(app.data);
                var products = app.data;
                var markers = [];
                for (var i = 0; i < products.length; i++){
                    var imgUrl = this.getUrl(products[i]["Url"],products[i]["Type"]);
                    var marker = new AMap.Marker({
                        position: new AMap.LngLat(products[i]["Longitude"], products[i]["Latitude"]),
                        icon: imgUrl,
                        extData: {
                            id: products[i]["Id"],
                            url: products[i]["Url"],
                            type: products[i]["Type"],
                            title: products[i]["Title"],
                            shootTime: products[i]["ShootTime"],
                            address: products[i]["Address"]
                        }
                    });
                    markers.push(marker);
                    marker.off("click",this.showProduct);
                    marker.on("click",this.showProduct);
                }
                var overlayGroups = new AMap.OverlayGroup(markers);
                this.map.add(overlayGroups)
            },
            showProduct(e){
                console.log(e.target.C.extData);
                this.show = e.target.C.extData;
                if(this.show['type'] === 0 && this.show['url'].indexOf("http://oss.longzongqin.cn") === -1){
                    this.show["url"] = "http://oss.longzongqin.cn/"+this.show['url']+"?x-oss-process=image/resize,h_600";
                }

                if(this.show['type'] === 1){
                    this.$nextTick(function () {
                        initPlayer(this.show["url"]);
                    });
                }
                document.getElementById("showProduct").style.display = "block";
            },
            closeShow(){
                this.show = [];
                document.getElementById("showProduct").style.display = "none";
            },
            getUrl(url,type) {
                if(type === 0){
                    return "http://oss.longzongqin.cn/"+url+"?x-oss-process=image/resize,m_fill,h_30,w_30,limit_0";
                }else{
                    return "http://video.longzongqin.cn/"+url.split(".")[0]+".jpg?x-oss-process=image/resize,m_fill,h_30,w_30,limit_0";
                }

            }

        }

    })
    var player = "";
    function initPlayer(url) {
        var urlArr = url.split(".");
        var img = "http://video.longzongqin.cn/"+urlArr[0]+".jpg";
        var url = "http://oss.longzongqin.cn/"+url;
        console.log(img);
        console.log(url);
        // 初始化播放器
        document.querySelector("#videoDiv").innerHTML = '<div id="J_prismPlayer" class="prism-player"></div>';
        player = new prismplayer({
            id: "J_prismPlayer", // 容器id
            source: url,// 视频地址
            cover: img,// 视频地址
            autoplay: true,    //自动播放：否
            width: "100%",       // 播放器宽度
            playsinline: true   //播放时不自动全屏
        });
    }

</script>
</html>
